{% load static %}
<style type="text/css">
.chat-dropdown-header:hover{
    cursor: pointer;
    background: var(--main-background-color);

}
.chat-dropdown-header{
    color: var(--light-primary-text-color);

}
</style>

<div class="d-flex p-3 px-md-4 mb-4 bg-blue border-bottom shadow-sm">
    
    <div class="d-none d-md-flex flex-row my-auto flex-grow-1 align-items-cemter">

        <!-- c1 -->
        <h5 class="mr-3 font-wight-normal justify-content-start">
            <a class="p-2 text-dark" href="{% url 'home' %}">Home</a>
        </h5>

        <!-- c2 -->
        <form class="search-bar justify-content-start" onsubmit="return executeQuery();">
        <input type="text" class="form-control" name="q" id="id_q_large" placeholder="Search...">
        </form>

        <!-- c3 -->
        <div class="d-flex flex-row-reverse flex-grow-1">
            <nav class="">
            {% if request.user.is_authenticated %}
                <div class="dropdown dropleft show p-2">
                    <div class="d-flex flex-row">
                        <!-- Chat Notifications -->
                        <div class="btn-group dropleft">
                            <div class="d-flex notifications-icon-container rounded-circle align-items-center mr-3" id="id_chat_notification_dropdown_toggle" data-toggle="dropdown">
                                <span id="id_chat_notifications_count" class="notify-badge"></span>
                                <span class="d-flex material-icons notifications-material-icon m-auto align-items-center">chat</span>
                                <div class="dropdown-menu scrollable-menu" aria-labelledby="id_chat_notification_dropdown_toggle" id="id_chat_notifications_container">
                                </div>
                            </div>
                        </div>
                        <!-- General Notification -->
                        <div class="btn-group dropleft">
                            <div class="d-flex notifications-icon-container rounded-circle align-items-center mr-3" id="id_notification_dropdown_toggle" data-toggle="dropdown" >
                                <span id="id_general_notifications_count" class="notify-badge"></span>
                                <span class="d-flex material-icons notifications-material-icon m-auto align-items-center">notifications</span>
                                <div class="dropdown-menu scrollable-menu" aria-labelledby="id_notification_dropdown_toggle" id="id_general_notifications_container">					
                                </div>
                            </div>
                        </div>
                        <!-- Account -->
                        <div class="btn-group dropleft">
                            <img class="account-image rounded-circle m-auto d-block dropdown-toggle" id="id_profile_links" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="{{request.user.profile_image.url}}" alt="logo" width="40" height="40">
                            <div class="dropdown-menu" aria-labelledby="id_profile_links">
                                <a class="dropdown-item" href="{% url 'account:view' user_id=request.user.id %}">Account</a>
                                <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
                            </div>
                        </div>
                    </div>
                    
                </div>
                {% else %}
                    <a class="p-2 text-dark" href="{% url 'login' %}">Login</a>
                    <a class="btn btn-outline-primary" href="{% url 'register' %}">Register</a>
                {% endif %}	
            </nav>
        </div>
    </div>
    <!-- END MEDIUM+ SCREENS -->

	<!-- SMALL SCREENS -->
	<div class="d-flex d-md-none flex-column my-auto align-items-center">

        <!-- r1 -->
		<h5 class="font-weight-normal">
		    <a class="p-2 text-dark" href="{% url 'home' %}">Home</a>
		</h5>

        <!-- r2 -->
		<form class="search-bar justify-content-start" onsubmit="return executeQuery();">
			<input type="text" class="form-control" name="q" id="id_q_small" placeholder="Search...">
		</form>

        <!-- r3 -->
		<div class="d-flex flex-row-reverse flex-grow-1">
			<nav class="">
				{% if request.user.is_authenticated %}
				<div class="dropdown dropleft p-2 mt-2">
					<div class="d-flex flex-row">
						<div class="btn-group dropleft">
							<img class="account-image rounded-circle m-auto d-block dropdown-toggle" id="id_profile_links" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="{{request.user.profile_image.url}}" alt="logo" width="40" height="40">
							<div class="dropdown-menu" aria-labelledby="id_profile_links">
								<a class="dropdown-item" href="{% url 'account:view' user_id=request.user.id  %}">Account</a>
                                <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
							</div>
						</div>
					</div>
				</div>
				{% else %}
					<a class="p-2 text-dark" href="{% url 'login' %}">Login</a>
					<a class="btn btn-outline-primary m-2" href="{% url 'register' %}">Register</a>
				{% endif %}	
			</nav>
	  	</div>
	</div>
	<!-- END SMALL SCREENS -->
</div>

<script type="text/javascript">
    setupChatDropdownHeader()

    function executeQuery(){
        var query = document.getElementById("id_q_small").value;
        if(query == ""){
            query = document.getElementById("id_q_large").value;
        }
        window.location.replace("{% url 'search' %}?q=" + query)
        return false
    }
    function setupChatDropdownHeader(){
		var notificationContainer = document.getElementById("id_chat_notifications_container")

		if(notificationContainer != null){

			var div = document.createElement("div")
			div.classList.add("chat-dropdown-header", "d-flex", "flex-row", "justify-content-end", "m-auto", "align-items-end")
			div.addEventListener("click", function(e){
				var url = "{% url 'chat:private-chat-room' %}"
				chatRedirect(url)
			})

			span1 = document.createElement("span")
			span1.classList.add("mr-2")
			span1.innerHTML = "Go to chat"
			div.appendChild(span1)

			span2 = document.createElement("span")
			span2.classList.add("material-icons", "mr-2")
			span2.innerHTML = "open_with"
			div.appendChild(span2)
			notificationContainer.appendChild(div)
		}
	}

	function chatRedirect(url){
		window.location.href = url
	}
</script>